<template>
    <div v-loading="loading">
        <el-card>
            <template>
                <h2>班级管理</h2>
                <el-button type="text" @click="$router.push({ name: 'ClassAdd' })">添加</el-button>
            </template>
            <!-- 搜索框 -->
            <div style="margin-top: 15px">
                <el-input placeholder="请输入内容" v-model="searchValue" class="input-with-select">
                    <el-select slot="prepend" v-model="searchField" style="width: 100px" placeholder="请选择">
                        <el-option label="班级名" value="classname"></el-option>
                    </el-select>
                    <el-button slot="append" @click="getClassesLoading" icon="el-icon-search"></el-button>
                </el-input>
            </div>

            <el-table :data="classes.classes.result" border stripe>
                <el-table-column prop="classname" label="班级" width="100px"></el-table-column>
                <el-table-column label="创建时间">
                    <template #default="{ row }">
                        <div>
                            {{ dayjs(row.ctime).format('YYYY-MM-DD HH:mm:ss') }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="{ row }">
                        <div>
                            <el-button type="text" @click="editCl(row._id)">编辑</el-button>
                            <el-button type="text" @click="del(row._id)">删除</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <div>
            <el-pagination :page-size="perPage" layout="total, prev, pager, next" :total="classes.classes.count" background
                @current-change="changePage">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import { mapActions, mapState } from "vuex";
import dayjs from 'dayjs';
export default {
    data() {
        return {
            page: 2,
            perPage: 4,
            loading: false,
            searchField: "classname",
            searchValue: "",
        };
    },
    created() {
        this.changePage();
    },
    computed: {
        ...mapState(["classes"]),
    },
    methods: {
        ...mapActions("classes", ["getClasses", "delClasses"]),
        //编辑
        editCl(id) {
            this.$router.push({ name: "ClassEdit", params: { id } });
        },

        //删除
        async del(id) {
            try {
                await this.$confirm("确定删除吗");
                this.loading = true;
                await this.delClasses(id);
                await this.getClassesLoading();
            } catch (error) { }
            this.loading = false;
        },

        dayjs(date) {
            return dayjs(date);
        },

        async getClassesLoading() {
            this.loading = true;
            const r = {
                page: this.page,
                perPage: this.perPage,
                searchField: this.searchField,
            };
            if (this.searchValue) {
                r.searchValue = this.searchValue;
            }
            try {
                await this.getClasses(r);
            } catch (error) { }
            this.loading = false;
        },
        changePage(e) {
            this.page = e;
            this.getClassesLoading();
        },
    },
};
</script>
  